<!--
fault-spread
故障件分布（驾驶舱部分）
-->
<template>
    <div
    class="fault-spread">
        <!-- 这里是各个类型的轮播 -->
        <el-carousel
        :height="carouselOption.height"
        :autoplay="carouselOption.autoplay"
        :arrow="carouselOption.arrow"
        :loop="carouselOption.loop"
        :interval="carouselOption.interval"
        class="chart-carousel">
        <el-carousel-item
        v-for="item in chartsData"
        :key="item.title">
            <div class="chart-wrapper">
            <div
            class="chart-title">
            {{item.title}}
            </div>
                <div class="chart-item">
                <pie-ring
                ref="second"
                :chartData="item"
                :chartId="item.title"
                :title="item.title"
                ></pie-ring>
                </div>
            </div>
            </el-carousel-item>
        </el-carousel>
        <div class="fault-spread-border"></div>
    </div>
</template>

<script>
import {
    getFaultDistribute,
} from '@/apis';

export default {
    name: 'fault-spread',
    components: {
        'pie-ring': () => import(/* webpackChunkName: "pie-ring" */'@/components/home/pie-ring'),
    },
    data() {
        // 轮播的配置
        this.carouselOption = {
            arrow: 'never',
            interval: 10000,
            autoplay: true,
            loop: true,
            height: '100%',
        };
        return {
            chartsData: [], // 图表数据
            showChart: false,
        };
    },
    methods: {
        // 获取故障分布echat数据
        getFaultDatas() {
            getFaultDistribute().then((res) => {
                window.console.log('获取故障分布echat数据', res);
                const {
                    data,
                    code,
                } = res.data;
                if (code === 200) {
                    const {
                        byEquipment,
                    } = data;
                    this.chartsData = byEquipment;
                }
            }).catch((err) => {
                window.console.log('获取故障分布echat数据', err);
            });
        },
    },
    created() {
        this.getFaultDatas();
    },
};
</script>
<style lang='scss'>
.fault-spread {
    position: absolute;
    //width: 9.11rem;
    width: 135%;
    //height: 3.2rem;
    height: 100%;
    top: 23%;
    transform: rotateZ(357deg);

    .fault-spread-border {
        width: 1px;
        height: 80%;
        background: #0980D3;
        position: absolute;
        right: .2rem;
        top: .7rem;
    }

    .el-carousel {
        z-index: 1
    }

    .el-carousel__container {
        width: 100%!important;
        height: 100%!important;
        overflow: hidden;
    }

    .el-carousel__button {
        width: .25rem!important;
    }

    .chart-carousel {
        width: 100%;
        height: 100%;

        .chart-wrapper {
            width: 100%;
            height: 100%;
            position: relative;
            display: flex;
            flex-wrap: wrap;

            .chart-title {
                width: 1.53rem /* 84/80 */;
                height: .48rem /* 26/80 */;
                position: absolute;
                top: .05rem;
                left: .2rem;
                font-size: .33rem /* 14/80 */;
                color: #00A5FF;
                background: url('../../assets/ft.png') no-repeat center center;
                background-size: 100% 100%;
                text-align: center;
                line-height: .48rem /* 26/80 */;
            }

            .chart-item {
                width: 100%;
                height: 100%;
                display: flex;
                justify-content: center;
                align-items: center;
                float: left;
            }
        }
    }
}

</style>
